<template>
  <div>
    <p class="goback" @click="gobackFn"> <i class="el-icon-back"></i> | 返回</p>
    <div class="detail">
        <aside class="detail-left">
          <img :src="storeinfo.product_img" alt="" class="detail_img">
          <div class="shopping">
            <el-button type="success" round @click="botosettlement">立即购买</el-button>
            <el-button type="warning" round @click="addshoppingcar(storeinfo.id)">加入购物车</el-button>
            <template>
              <el-button type="warning" icon="el-icon-star-off" circle v-if="storeinfo.star === 0" @click="starstore(storeinfo.id)"></el-button>
              <el-button type="warning" icon="el-icon-star-on" circle v-else @click="starstore(storeinfo.id)"></el-button>
            </template>
          </div>
        </aside>
        <aside class="detail-right">
          <p class="title">{{storeinfo.product_name || "商品名称" }}</p><br>
          <span>所属分类：{{ storeinfo.category }}</span>
          <span>配送：天津 至 全国各地 现货，付款后48小时内发货</span> <br>
          <span>数量：<el-input-number v-model="num1" size="small" :min="1" :max="parseInt(storeinfo.product_num)"></el-input-number> &nbsp; 剩余数量:{{ storeinfo.product_num || 0 }}</span>
          <br>
          <span class="storedetail">详情：{{ storeinfo.detail || "商品详情" }}</span> <br>
          <p v-if="storeinfo.price.indexOf('.') === -1" class="price">￥{{ storeinfo.price }}.00</p>
          <p v-else class="price">￥{{ storeinfo.price }}</p>
        </aside>
    </div>
    <div class="publish">
      <p>评论</p>
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="commentForm.content"
        maxlength="500"
        show-word-limit>
      </el-input>
      <el-button type="primary" round @click="lookcommentFN" size="mini">查看商品评论</el-button>
      <el-button type="primary" round @click="publishcomment" size="mini">发表评论</el-button>
    </div>
    <div class="content" v-if="commentIsLook">
      <div class='user-content' v-for="item in currentComment" :key="item.id">
        <div class="userinfo">
          <img :src="item.user_pic" alt="" class="userpic" v-if="item.user_pic">
          <img src="../../assets/头像.png" alt="" class="userpic" v-else><br>
          <span>{{item.user_nickname || item.comment_user }}</span>
        </div>
        <content class="content-detail">
          <p>{{item.content}}</p>
          <span>{{ item.comment_time }}</span>
        </content>
      </div>
      <el-pagination v-if="commentList.length > 5"
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="currentPage"
        :total="commentList.length"
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import { starStoreAPI, getstoreByid, addshoppingcarAPI, addCommentAPI, getCommentAPI } from '@/api'
import { mapMutations } from 'vuex'
export default {
  name: 'store-detail',
  data () {
    return {
      num1: 1,
      commentIsLook: true,
      commentForm: {
        content: '',
        comment_time: '',
        store_id: ''
      },
      commentList: [],
      currentPage: 1, // 当前页码
      pageSize: 5 // 每页显示数量
    }
  },
  computed: {
    userinfo () {
      return this.$store.state.userinfo
    },
    storeinfo () {
      return this.$store.state.storedetail
    },
    totalPages () {
      return Math.ceil(this.commentList.length / this.pageSize) // 总页数
    },
    currentComment () {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      return this.commentList.slice(startIndex, endIndex)
    }
  },
  mounted () {
  },
  methods: {
    ...mapMutations(['getstoredetail', 'getOrderList', 'getOrderPrice']),
    getcommentList () {
      console.log(this.storeinfo.id)
      getCommentAPI(this.storeinfo.id).then(({ data }) => {
        if (data.status !== 0) return this.$message.error(data.message)
        this.commentList = data.data
        this.commentList.sort((a, b) => {
          return b.id - a.id
        })
      })
    },
    // 是否收藏
    async starstore (id) {
      const { data } = await starStoreAPI(id)
      if (data.status !== 0) return this.$message.error(data.message)
      this.$message.success(data.message)
      getstoreByid(id).then(({ data }) => {
        this.getstoredetail(data.data)
      })
    },
    async addshoppingcar (id) {
      const { data } = await addshoppingcarAPI(id)
      if (data.status !== 0) return this.$message.error(data.message)
      this.$message.success(data.message)
      getstoreByid(id).then(({ data }) => {
        this.getstoredetail(data.data)
      })
    },
    gobackFn () {
      this.$router.go(-1)
    },
    botosettlement () {
      const price = parseFloat(this.storeinfo.price) * this.num1
      this.storeinfo.num = this.num1
      const orderarr = []
      orderarr.push(this.storeinfo)
      this.getOrderList(orderarr)
      this.getOrderPrice(price.toString())
      this.$router.push('/settlement')
    },
    // 查看评论
    lookcommentFN () {
      this.getcommentList()
      this.commentIsLook = true
    },
    // 发布评论
    publishcomment () {
      this.commentForm.store_id = this.storeinfo.id
      const time = new Date()
      const year = time.getFullYear()
      const month = time.getMonth() + 1
      const day = time.getDate()
      const hour = time.getHours()
      const minutes = time.getMinutes()
      this.commentForm.comment_time = `${year}-${month}-${day} ${hour}:${minutes}`
      this.commentForm.user_pic = this.userinfo.user_pic
      // console.log(this.commentForm)
      if (this.commentForm.content.trim() === '') {
        alert('请输入评价内容')
      } else {
        addCommentAPI(this.commentForm).then(({ data }) => {
          if (data.status !== 0) return this.$message.error(data.message)
          this.$message.success(data.message)
          this.commentForm.content = ''
          this.getcommentList()
          this.commentIsLook = true
        })
      }
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
    }
  }
}
</script>

<style scoped>
  .detail {
    display: flex;
    justify-content: center;
  }
  .detail_img {
    width: 450px;
    height: 450px;
    border-radius: 15px;
  }
  .detail-left {
    margin: 20px;
  }
  .detail-right{
    width: 370px;
    margin: 20px;
  }
  .detail-right span {
    margin-top: 15px;
    margin-bottom: 20px;
    display: inline-block;
  }
  .shopping {
    margin-top: 30px;
  }
  .title {
    font-size: 20px;
    font-weight: 500;
    font-family: PingFang SC;
    font-weight: 900;
    color: #000;
  }
  .price {
    color:red;
    font-size: 28px;
  }
  .goback {
    margin: 0;
    padding: 0;
    margin-left: 17%;
  }
  .goback:hover {
    opacity: .6;
    color: gray;
    cursor: pointer;
  }
  .publish {
    width: 50%;
  }
  .publish .el-button {
    margin: 5px;
    float: right;
  }
  .content {
    width: 70%;
    height: 100%;
  }
  .user-content {
    overflow: hidden;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .userpic {
    width: 40px;
    height: 40px;
    margin-left: 10px;
    border-radius: 50%;
  }
  .userinfo {
    margin: 10px;
    margin-right: 20px;
    text-align: center;
    color: #404040;
    font-size: 12px;
  }

  .content-detail p{
    margin: 0;
    padding: 0;
    text-align: left;
    text-indent: 0;
    margin-bottom: 16px;
  }
  .content-detail span {
    font-size: 12px;
    color: #B0B0B0;
  }
</style>
